<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>衣服相册</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        ul li{
            float: left;
            margin-left: 10px;
            border: 2px solid #ffffff;
        }
        ul li.active{
            border: 2px red solid;
        }
    </style>
</head>
<body>
    <img src="1.jpg" alt="" width="400px" id="show_imgs">
    <ul>
        <li class="active"><img src="1.jpg" alt="" class="smallImg" width="50px"></li>
        <li><img src="2.jpg" alt="" class="smallImg" width="50px"></li>
        <li><img src="3.jpg" alt="" class="smallImg" width="50px"></li>
        <li><img src="4.jpg" alt="" class="smallImg" width="50px"></li>
        <li><img src="5.jpg" alt="" class="smallImg" width="50px"></li>
        <li><img src="6.jpg" alt="" class="smallImg" width="50px"></li>       
    </ul>
    <script>
         var bigImg = document.getElementById('show_imgs');
         var smallImg = document.getElementsByClassName('smallImg');
         for(var i=0;i<smallImg.length;i++){
             smallImg[i].onmouseover = function(){
                 for(var j = 0;j<smallImg.length;j++){
                     smallImg[j].parentNode.setAttribute('class','');
                 }
                 var smallImgSrc = this.getAttribute('src')
                 bigImg.setAttribute('src',smallImgSrc)
                 this.parentNode.setAttribute('class','active');
             }
         } 
    </script>
</body>